<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{display: flex;justify-content: center;align-items: center;}
        .box1{width:400px;height:400px;background: red;}
        .box2{width:300px;height:300px;background: green;}
        .box3{width:200px;height:200px;background: blue;}
        .box4{width:100px;height:100px;background: yellow;}
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2">
            <div class="box3">
                <div class="box4"></div>
            </div>
        </div>
    </div>
</body>
<script>

    var box1 = document.querySelector(".box1");
    var box2 = document.querySelector(".box2");
    var box3 = document.querySelector(".box3");
    var box4 = document.querySelector(".box4");

    box4.addEventListener("click", function(){
        alert("冒泡的yellow")
    }, false)
    box2.addEventListener("click", function(){
        alert("冒泡的green")
    }, false)
    box1.addEventListener("click", function(){
        alert("捕获的red")
    }, true)
    box2.addEventListener("click", function(){
        alert("捕获的green")
    }, true)
    box1.addEventListener("click", function(){
        alert("冒泡的red")
    }, false)
    box3.addEventListener("click", function(){
        alert("捕获的blue")
    }, true)
    box4.addEventListener("click", function(){
        alert("捕获的yellow")
    }, true)
    box3.addEventListener("click", function(){
        alert("冒泡的blue")
    }, false)
    
</script>
</html>